Ccay.Module.define("Ccay.example.ui.chart.jqplot",function(page,$S){
	page.ready=function(){
		/*
		 * 初始化
		 */
		$S("#barDemo").ccayTab({
			fnAfterSelectItem: function(tabId){
				if(tabId == 'chart' && !$S("#chart").hasClass("jqplot-target")){
					renderBarChart();
					renderBarChart4();
				}else if(tabId == 'chart1' && !$S("#chart1").hasClass("jqplot-target")){
					renderBarChart2();
				}else if(tabId == 'chart2' && !$S("#chart2").hasClass("jqplot-target")){
					renderBarChart3();
				}
			}
		});
	}
	/*
	 * 柱图
	 */
	var renderBarChart = function(){
		$("#chart").chart2({
    	   ajax: {
			   url : 'ccay/example/ui/chart/datas2.json'
		   }, 
		   convertArrayType: 2,
		   convertFields:['profit','total'],
    	   skin: {
    		 seriesDefaults: {
		         renderer: $.jqplot.BarRenderer, //使用柱状图表示
		         shadow:false,
		         shadowAngle: 135,
		         pointLabels: { show: true},
		         rendererOptions: {
		        	 barPadding: 0,
		             barMargin: 15,   //柱状体组之间间隔
		             barWidth: 25
		         }		          
	         },
	         series:[
                 {label:'月度利润'},
                 {label:'月度销售额'}
             ],
	         axes: {  
	        	  xaxis: {
	        		  ticks: ['January','February','March','April','May', 'June', 'July', 'August'],
		              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
		              tickRenderer: $.jqplot.CanvasAxisTickRenderer,  
		        	  tickOptions: {
		        	  	  angle: -30
		        	  }
	        	  },
	        	  yaxis: {
		        	  tickOptions: { 
		        		  formatString: "%.2f"
		        	  }
	        	  }
	          },
	          legend: {
	              show: false
	          }
    	   },
    	   click: function (ev, seriesIndex, pointIndex, data) {
				Ccay.UI.topBox("The seriesIndex is {0}, pointIndex is {1}, x is {2}, y is {3}. 注册 click 事件并显示明细数据或者Chart可以达到钻取的效果。".formatValue( seriesIndex, pointIndex , data[0], data[1]));
           }
        });
	}
	
	 
	       		
	       		var renderBarChart4 = function(){
	       			$("#chart4").chart2({
	       	    	   ajax: {
	       				   url : 'ccay/example/ui/chart/datas2.json'
	       			   }, 
	       			   convertArrayType: 2,
	       			   convertFields:['profit','total'],
	       	    	   skin: {
	       	    		 seriesDefaults: {
	       			         renderer: $.jqplot.BarRenderer, //使用柱状图表示
	       			         shadow:false,
	       			         shadowAngle: 135,
	       			         pointLabels: { show: false},
	       			         showHighlight: true,
	       			         rendererOptions: {
	       			        	 barPadding: 0,
	       			             barMargin: 15,   //柱状体组之间间隔
	       			             barWidth: 25
	       			         }		          
	       		         },
	       		         series:[
	       	                 {label:'月度利润'},
	       	                 {label:'月度销售额'}
	       	             ],
	       		         axes: {  
	       		        	  xaxis: {
	       		        		  ticks: ['January','February','March','April','May', 'June', 'July', 'August'],
	       			              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
	       			              tickRenderer: $.jqplot.CanvasAxisTickRenderer,  
	       			        	  tickOptions: {
	       			        	  	  angle: -30
	       			        	  }
	       		        	  },
	       		        	  yaxis: {
	       			        	  tickOptions: { 
	       			        		  formatString: "%.2f"
	       			        	  }
	       		        	  }
	       		          },
	       		          legend: {
	       		              show: false
	       		          },
	       		          highlighter: {
	       		                show: true, 
	       		                showLabel: true, 
	       		                tooltipAxes: 'y',
	       		                sizeAdjust: -5 , tooltipLocation : 'n'
	       		            }
    	   },
    	   click: function (ev, seriesIndex, pointIndex, data) {
				Ccay.UI.topBox("The seriesIndex is {0}, pointIndex is {1}, x is {2}, y is {3}. 注册 click 事件并显示明细数据或者Chart可以达到钻取的效果。".formatValue( seriesIndex, pointIndex , data[0], data[1]));
           }
        });
	}
	/*
	 * 横向柱图
	 */
	var renderBarChart2 = function(){
		var line1 = [1641, 1626, 929, 217,1088];           //子统计1数据
	    var line2 = [6371.71, 6619.90, 1853.02, 1108.79, 5245.51];     //子统计2数据
       	var ticks = ['May', 'June', 'July', 'August'];
       	$("#chart1").chart2({
    		data: [line1,line2],
    		skin: {
    			seriesDefaults: {
	 		         renderer: $.jqplot.BarRenderer, //使用柱状图表示
	 		         shadowAngle: 135,
	 		         pointLabels: { show: true},
	 		         rendererOptions: {
	 		        	 barPadding: 0,
	 		             barMargin: 15,   //柱状体组之间间隔
	 		             barWidth: 25,
	 		             barDirection: "horizontal"
	 		         }		          
 		         },
 		         axes: {  
 		        	  yaxis: {
 		        		  ticks: ticks,
			              renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
 			        	  tickOptions: { 
 			        		  markSize: 0
 			        	  }
 		        	  },
 		        	 xaxis: {
 			        	 tickOptions: { 
 			        		 show: false,
		        		   formatString: "%.2f"
 			        	 }
 		        	  }
 		          }
    		}
    	});
	}
	/*
	 * 支持时间格式的X轴
	 */
	var renderBarChart3 = function(){
		var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000], 
	             [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
       	var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400], 
	             [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100], [2011, 17300]];
    	$("#chart2").chart2({
 			data: [s2, s1],
			skin: {
	            animate: true,
	            animateReplot: true,
	            cursor: {
	                show: true,
	                zoom: true,
	                looseZoom: true,
	                showTooltip: false
	            },
	            series:[
	                {
	                    pointLabels: {
	                        show: true
	                    },
	                    renderer: $.jqplot.BarRenderer,
	                    showHighlight: false,
	                    yaxis: 'y2axis',
	                    rendererOptions: {
	                        animation: {
	                            speed: 2500
	                        },
	                        barWidth: 25,
	                        barPadding: -15,
	                        barMargin: 0,
	                        highlightMouseOver: false
	                    }
	                }, 
	                {
	                    rendererOptions: {
	                        animation: {
	                            speed: 2000
	                        }
	                    }
	                }
	            ],
	            axesDefaults: {
	                pad: 0
	            },
	            axes: {
	                xaxis: {
	                    tickInterval: 1,
	                    drawMajorGridlines: false,
	                    drawMinorGridlines: true,
	                    drawMajorTickMarks: false,
	                    rendererOptions: {
	                    tickInset: 0.5,
	                    minorTicks: 1
	                }
	                },
	                yaxis: {
	                    tickOptions: {
	                        formatString: "$%'d"
	                    },
	                    rendererOptions: {
	                        forceTickAt0: true
	                    }
	                },
	                y2axis: {
	                    tickOptions: {
	                        formatString: "$%'d"
	                    },
	                    rendererOptions: {
	                        alignTicks: true,
	                        forceTickAt0: true
	                    }
	                }
	            },
	            highlighter: {
	                show: true, 
	                showLabel: true, 
	                tooltipAxes: 'y',
	                sizeAdjust: 7.5 , tooltipLocation : 'ne'
	            }
			}
 		});
	}
})